<template>
  <div class="body" v-show="todosShow">
    <ul>
      <li v-for="(item,index) in todos" :key="index" v-show="item.show">
        <label :for="index" class="label" :class="{label_1:item.completed}">
          <input type="checkbox" v-model="item.completed" class="left" :id="index">
        </label>
        <div class="center">
          <span>{{item.record}}</span>
        </div>
        <button class="right" @click="del(index)">
        <span class="rightContent" >
          删除
        </span>
        </button>
      </li>
    </ul>
  </div>
</template>

<script>
  import {mapState,mapGetters,mapActions} from 'vuex'
  import localStorage from '../../ulti/localStorage'
  export default {
    name: "itemBody",
    data(){
      return {
      }
    },
    watch:{
      todos:{
        deep:true,
        handler: function (value) {
          localStorage.saveTodos(value);
        }
      }
    },
    computed:{
      ...mapState({
        todos:(state=>state.todos)
      }),
      ...mapGetters({
        todosShow:'todosShow'
      })
    },
    mounted(){

    },
    methods:{
      ...mapActions({
        delItem: 'delItem'
      }),
      del(index){
        this.delItem(index);
      }
    }
  }
</script>

<style scoped>
  .body {
  }

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .body ul li {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
    border-bottom: 1px solid #bdcac7;
    position: relative;
  }

  .body ul li .left,
  .body ul li .right{
    width: 50px;
    height: 50px;
    margin: 0;
    text-decoration: none;
    outline: none;
    border: none;
    background-color: #ccc;
  }

  .body ul li .right{
    background-color: #fff;
  }

  .body ul li .left{
    -webkit-appearance: none;
    background-color: #fff;
  }


  .body ul li button span{
    display: block;
    width: 30px;
    height: 30px;
    border: 1px solid #4f4f4f;
    margin: 0 auto;
    line-height: 30px;
    font-size: 10px;
  }
  .body .center{
    flex: 1;
  }
  .body .center span{
    width: 100%;
    padding-left: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: left;
    display: inline-block;
    line-height: 50px;
  }
  .label::before{
    content: '\2714';
    display: block;
    text-align: center;
    line-height: 50px;
    width: 50px;
    position: absolute;
    top: 0;
  }
  .label{
    height: 50px;
    opacity: 0.4;
    background-color: #bdcac7;
  }
  .label_1{
    opacity: 1;
    background-color: #fff;
  }
</style>
